<template>
    <div>

        <tabs :keyData="tabList" :tableData="tableData">
            <template #mainImage="{ row }">
                <img :src="row.mainImage" alt="" srcset="" class="imgStyle">
            </template>
            <template #center="{ row }">

                <Obutton :bttonData="row" @DataDel="DataDel" @bClock="bClock"></Obutton>
            </template>
        </tabs>
        <el-dialog :visible.sync="dialogVisible" width="35%">
            <div class="wid-17">
                <dynamicForm :dataUire="formHead" :formData="formData">

                    <template #mainImage="{ row }">

                        <img :src="formData.mainImage" alt="" srcset="" class="imgStyle">
                    </template>
                </dynamicForm>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import moment from "moment";
import { getMdseList } from '@/api/mdse'
import { mateOrder, getCookie, findIndex } from "@/utils/util";
export default {
    data() {
        return {
            tableData: [],
            tabList: [
                { name: '标题', key: 'title' },
                { name: '每天库存数量', key: 'inventory' },
                { name: '实际库存', key: 'physicalInventory' },
                { name: '消费上限', key: 'upperLimit' },
                { name: '平台', key: 'platform' },
                { name: '返现', key: 'cashBack' },
                { name: '主图', key: 'slot', slotName: "mainImage" },
                { name: '是否开启好评', key: 'goodReview' },
                { name: '是否上架', key: 'isDisplayed' },
                { name: '创建者', key: 'userOpenId' },
                { name: '是否显示', key: 'isShow' },
                { name: '产品类型', key: 'productType' },
                { name: '创建时间', key: 'createdAt' },
                { name: '更新时间', key: 'updatedAt' },
            ],
            formHead: [
                { key: 'title', name: '标题', type: 'text' },
                { key: 'inventory', name: '每天库存', type: 'text' },
                { key: 'physicalInventory', name: '实际库存', type: 'text' },
                { key: 'upperLimit', name: '消费上限', type: 'text' },
                { key: 'cashBack', name: '平台返现/元', type: 'text' },
                { key: 'mainImage', name: '主图', type: 'slot' },
                { key: 'addressd_etails', name: '定位地址', type: 'text' },
                { key: 'goodReview', name: '是否好评', type: 'select', children: [] },
                { key: 'isDisplayed', name: '是否上架', type: 'select', children: [] },
                { name: '平台', key: 'platform', type: 'select', children: [] },
                { name: '是否显示', key: 'isShow', type: 'select', children: [] },
                { name: '产品类型', key: 'productType', type: 'select', children: [] },
            ],
            pagination: {
                limit: 5,
                page: 1
            },
            dialogVisible: false,
            DataDictionary: {},
            formData: {},
        }
    },
    created() {
        this.getMdseList()
    },
    mounted() {

        this.findIndex()
    },

    methods: {

        bClock(e) {
            this.formData = e
            this.dialogVisible = true
        },
        DataDel() {
            console.log('删除成功');
        },
        async getMdseList() {
            this.Dictionary()
            let res = await getMdseList(this.pagination)
            let DataDictionary = this.DataDictionary



            this.tableData = res.list.map(item => {
                item.createdAt = moment(item.createdAt).format("YYYY-MM-DD HH:mm:ss");
                item.updatedAt = moment(item.updatedAt).format("YYYY-MM-DD HH:mm:ss");
                item.cashBack = item.cashBack / 100
                item.goodReview = mateOrder(DataDictionary.mdse_dictionary, item.goodReview)
                item.isShow = mateOrder(DataDictionary.mdse_dictionary, item.isShow)
                item.isDisplayed = mateOrder(DataDictionary.mdse_dictionary, item.isDisplayed)
                item.platform = mateOrder(DataDictionary.mdse_platform, item.platform)
                item.productType = mateOrder(DataDictionary.class_ification, item.productType)
                return item
            })
        },
        // 字典处理
        Dictionary() {
            let mdse_platform = getCookie("mdse_platform")
            let mdse_dictionary = getCookie("mdse_dictionary");
            let class_ification = getCookie("mdse_dictionary_class_ification");
            mdse_platform = JSON.parse(mdse_platform)
            mdse_dictionary = JSON.parse(mdse_dictionary)
            class_ification = JSON.parse(class_ification)
            this.DataDictionary = {
                mdse_platform, mdse_dictionary, class_ification
            }
        },
        // 选择框数据处理
        findIndex() {
            let formHead = JSON.parse(JSON.stringify(this.formHead))
            let DataDictionary = JSON.parse(JSON.stringify(this.DataDictionary))
            let arr = [
                { key: "goodReview", dataKey: "mdse_dictionary" },
                { key: "isDisplayed", dataKey: "mdse_dictionary" },
                { key: "platform", dataKey: "mdse_platform" },
                { key: "isShow", dataKey: "mdse_dictionary" },
                { key: "productType", dataKey: "class_ification" },
            ]
            arr.forEach(item => {
                let index = findIndex(formHead, "key", item.key)
                formHead[index].children = retunary(item.dataKey)
            })
            function retunary(params) {
                return DataDictionary[params].map(r => {
                    r.value = r.code
                    r.label = r.definition
                    return r
                })
            }
            this.formHead = formHead
        }
    }
}
</script>

<style>
.imgStyle {
    height: 50px;
    width: 50px;
}
</style>
